<template>
	<view>
		<!-- #ifdef MP-WEIXIN -->
		<cu-custom bgColor="bg-red" :isBack="true">		<block slot="content">{{detail?detail.name:'商品详情'}}</block>
		</cu-custom>
		<!-- #endif -->
		<!-- #ifndef MP-WEIXIN -->
		<view class="cu-bar fixed" :class="scrollTop > 300?'bg-white':'vtop'" :style="[{height:CustomBar + 'px'}]">
			<view class="action " @tap="BackPage">
				<text class="cuIcon cuIcon-back"></text>
			</view>
			<view class="content ">
				商品详情
			</view>
			<view class="action align-center flex">
				<text class="cuIcon cuIcon-share " @tap="showShare"></text>
				<text class="cuIcon cuIcon-more " @tap="showFastModal"></text>
			</view>
		</view>
		<!-- #endif -->
		<block v-if="error">
			<view class="text-center errorview">
				<view>
					<view class="text-gray text-lg">商品信息有误</view>
					<view class="cu-btn round margin-top" :class="'line-'+theme">返回</view>
				</view>
			</view>
		</block>
		<block v-else>
			<view class="product-swiper relative" :style="'height:'+swiperHeight+'px;'">
				<!-- #ifdef MP-WEIXIN -->
				<view class="absolute vtop">
					<view class="action">
						<button class="sharebtn" open-type="share" v-if="!error && detail">
							<text class="cuIcon cuIcon-share blackbg1"></text>
						</button>
						<text class="cuIcon cuIcon-more margin-left blackbg1" @tap="showFastModal"></text>
					</view>
				</view>
				<!-- #endif -->
				<swiper class="screen-swiper" :indicator-dots="false" :autoplay="true" interval="5000" duration="500" @change="swiperChannelHandle"
				 v-if="detail" :style="'height:'+swiperHeight+'px;'">
					<swiper-item v-for="(item,index) in detail.covers" :key="index">
						<image :src="item" mode="aspectFit"></image>
					</swiper-item>
				</swiper>
				<view class="absolute swiper-dot-view text-white" v-if="detail">
					{{swiperCurrent+1}}/{{detail.covers.length}}
				</view>
			</view>
			<block v-if="detail && detail.merchant && detail.merchant.type==1">
				<view class="bg-white padding-tb">
					<view class="margin-lr  text-lg product-name">
						{{detail?detail.name:''}}
					</view>
					<view class="text-gray margin-lr margin-tb-xs">
						<text>库存：{{detail?detail.stock:'-'}}</text>
						<text class="margin-left">销量：{{detail?detail.sales:'-'}}</text>
					</view>
					<view class="space-between margin-lr ">
						<view class="">
							<text class="text-price text-xl text-red">{{detail?detail.price:'-'}}</text>
							<text class="text-price text-gray margin-left text-decoration" v-if="detail&&detail.market_price>0">{{detail.market_price}}</text>
						</view>
						<view v-if="detail">
							<text class="cuIcon cuIcon-rounddown text-blue default" v-if="cartProductNumber && cartProductNumber > 0" @tap="delCart"></text>
							<text class="text-lg padding-lr-sm" v-if="cartProductNumber && cartProductNumber > 0">{{cartProductNumber}}</text>
							<text class="cuIcon cuIcon-roundaddfill text-blue default" @tap="addCart"></text>
						</view>
					</view>
				</view>

				<block v-if="detail && detail.merchant">
					<view class="bg-white space-between padding margin-top align-center" @tap="goStore(detail.merchant)">
						<view class="cu-avatar default-bg lg round">
							<image :src="detail.merchant.logo" mode="aspectFill"></image>
						</view>
						<view class="w100 margin-left-sm">
							<view class="text-lg">{{detail.merchant.title}}</view>
							<view class="cu-tag sm margin-top-xs">
								<text v-if="detail.merchant.type==2">供应商</text>
								<text v-else>店铺</text>
							</view>
						</view>
						<view class="cuIcon cuIcon-right"></view>
					</view>
					<view class="bg-white space-between padding solid-top align-center" @tap="showLocation">
						<view class="w100 margin-left-sm">
							<text class="cuIcon cuIcon-location"></text>
							<text>{{detail.merchant.address_details}}</text>
						</view>
						<view>
							<text>{{mathLange}}</text>
							<text class="cuIcon cuIcon-right"></text>
						</view>
					</view>
				</block>

				<view class="bg-white margin-top">
					<view class="overflow">
						<view class="text-center margin-tb text-lg text-black">—— 商品详情 ——</view>
						<view class="content" v-if="detail">
							<rich-text :nodes="detail.intro"></rich-text>
						</view>
					</view>
				</view>
				<CartModal ref="CartModal" v-on:CartChange="cartChange"></CartModal>
			</block>
			<block v-else-if="detail">
				<block v-if="detail.marketing_id > 0&& detail.marketing">
					<view class="bg-red flex space-between padding">
						<view class="w100 ">
							<view class="text-price text-xl text-bold">{{detail.marketing_price}}</view>
							<view class="text-decoration text-price">{{detail.price}}</view>
						</view>
						<view class="margin-left text-right">
							<!-- <view>
								<text v-if="detail.marketing_type=='discount'">限时抢购</text>
							</view> -->
							<view class="" v-if="detail.marketing && detail.marketing.end_time">
								剩余时间：
								<CountDown :value="parseInt(detail.marketing.end_time)" :skin="'skin3'"></CountDown>
							</view>
						</view>
					</view>
					<view class="bg-white padding-tb">
						<view class="margin-lr  text-lg product-name">
							{{detail?detail.name:''}}
						</view>
					</view>
				</block>
				<block v-else>
					<view class="bg-white padding-tb">
						<view class="space-between margin-lr ">
							<view class="">
								<text class="text-price text-xl text-red">{{detail?detail.price:'-'}}</text>
								<text v-if="detail && detail.base_price" class="text-gray margin-left">原价：{{detail.base_price}}</text>
								<text class="text-price text-gray margin-left text-decoration" v-if="detail&&detail.market_price>0">{{detail.market_price}}</text>
							</view>
							<view class="text-gray ">销量：{{detail?detail.sales:'-'}}</view>
						</view>
						<view class="margin-lr margin-top-sm text-lg product-name">
							{{detail?detail.name:''}}
						</view>
					</view>
				</block>
				<view class="bg-white space-between padding margin-top align-center" v-if="detail && detail.merchant" @tap="goStore(detail.merchant)">
					<view class="cu-avatar default-bg lg round">
						<image :src="detail.merchant.logo" mode="aspectFill"></image>
					</view>
					<view class="w100 margin-left-sm">
						<view class="text-lg">{{detail.merchant.title}}</view>
						<view class="cu-tag sm margin-top-xs">
							<text v-if="detail.merchant.type==2">供应商</text>
							<text v-else>店铺</text>
						</view>
					</view>
					<view class="cuIcon cuIcon-right"></view>
				</view>

				<view class="bg-white margin-top-sm cu-list menu" v-if="detail">
					<view class="cu-item arrow" @tap="openCouponModal" v-if="detail && detail.canReceiveCoupon && detail.canReceiveCoupon.length > 0">
						<view class="content text-bold ">
							<text class="text-sm">优惠</text>
						</view>
						<view class="action text-black text-left w100">
							<text class="cu-tag sm light bg-red radius" v-for="(item,index) in detail.canReceiveCoupon" :key="index">
								<block v-if="item.type == 1">满{{item.at_least}}减{{item.money}}</block>
								<block v-else>满{{item.at_least}}打{{parseFloat(item.discount/10)}}折</block>
							</text>
						</view>
					</view>
					<view class="cu-item arrow" v-if="detail && detail.fullGive">
						<view class="content text-bold ">
							<text class="text-sm">促销</text>
						</view>
						<view class="action text-black text-left w100">
							<view class="text-justify padding-right" v-if="detail && detail.fullGive">
								<text class="cu-tag bg-red light sm margin-right-xs">满减送</text>
								<text class="text-black" v-for="(item,index) in detail.fullGive.rules" :key="index">
									满{{item.price}}可得<block v-if="item.discount>0">减额{{item.discount}}元，</block>
									<block v-if="item.free_shipping==1">免邮，</block>
									<block v-if="item.give_point>0">赠送{{item.give_point}}积分</block>
								</text>
							</view>
						</view>
					</view>
					<view class="cu-item " v-if="detail && detail.fullMail">
						<view class="content text-bold ">
							<text class="text-sm">邮费</text>
						</view>
						<view class="action ">
							<view>
								全场满<text class="text-price text-red">{{detail.fullMail.full_mail_money}}</text>免邮费
							</view>
						</view>
					</view>
				</view>
				<view class="bg-white margin-top-sm cu-list menu" v-if="detail && detail.sku.length > 1">
					<view class="cu-item arrow" @tap="openGoodsModal">
						<view class="content text-bold ">
							<text class="text-sm">规格选择</text>
						</view>
						<view class="action text-black">
							<!-- {{currentSku.name}} * {{number}} -->
						</view>
					</view>
				</view>

				<view class="bg-white space-between padding  align-center " v-if="detail && detail.point_exchange_type > 1">
					<view class="action">商品类型</view>
					<view>
						<block v-if="detail.point_exchange_type == 2">积分加现金购买:{{detail.point_exchange}}积分</block>
						<block v-if="detail.point_exchange_type == 3">积分兑换或直接购买:{{detail.point_exchange}}积分</block>
						<block v-if="detail.point_exchange_type == 4">只支持积分兑换:{{detail.point_exchange}}积分</block>
					</view>
				</view>

				<view class="bg-white margin-top">
					<view class="overflow">
						<view class="text-center margin-tb text-lg text-black">—— 商品详情 ——</view>
						<view class="content" v-if="detail">
							<rich-text :nodes="detail.intro"></rich-text>
						</view>
					</view>
				</view>

				<view class="main-ctr">
					<view class="blackbg round blackbg1 text-white" @tap="onTop" v-if="scrollTop > 300">
						<text class="cuIcon-top"></text>
					</view>
				</view>

				<view class="cu-bar bg-white tabbar  shop  foot" v-if="detail">
					<view class="action text-black" @tap="goPage('/pages/shop/index')">
						<view class="cuIcon-home"></view> 首页
					</view>
					<!-- #ifdef MP-WEIXIN -->
					<button class="action" open-type="contact">
						<view class="cuIcon-service text-black">
							<!-- <view class="cu-tag badge"></view> -->
						</view>
						客服
					</button>
					<!-- #endif -->
					<!-- #ifdef H5 -->
					<button class="action" @tap="openServiceModal">
						<view class="cuIcon-service text-black">
							<!-- <view class="cu-tag badge"></view> -->
						</view>
						客服
					</button>
					<!-- #endif -->
					<view class="action text-black" @tap="goPage('/pages/shop/cart/index')">
						<view class="cuIcon-cart">
							<view class="cu-tag badge" v-if="cartNum>0">{{cartNum}}</view>
						</view>
						购物车
					</view>

					<view class="btn-group  margin-left">
						<block v-if="detail.point_exchange_type==1">
							<button class="cu-btn light round-left w100" :class="'bg-'+theme" @tap="openGoodsModal">加入购物车</button>
							<button class="cu-btn  round-right  w100" :class="'bg-'+theme" @tap="openGoodsModal">
								<text v-if="detail.is_virtual==2">立即进货</text>
								<text v-else>立即购买</text>
							</button>
						</block>
						<block v-else>
							<button class="cu-btn  round  w100" :class="'bg-'+theme" @tap="openGoodsModal">
								<text v-if="detail.is_virtual==2">立即进货</text>
								<text v-else>立即购买</text>
							</button>
						</block>
					</view>
				</view>
			</block>
		</block>

		<block v-if="detail && detail.merchant && detail.merchant.type == 1">
		</block>
		<block v-else>
			<view class=" margin-top">
				<guessYouLikeView ref="guessYouLikeView"></guessYouLikeView>
			</view>
		</block>
		<couponModal ref="couponModal"></couponModal>

		<goodsModal ref="goodsModal" v-on:cartNumChange="cartNumChange"></goodsModal>
		<ShareView ref="ShareView"></ShareView>
		<serviceView ref="serviceView"></serviceView>
		<fastLink ref="fastLink"></fastLink>
		<Foot></Foot>
	</view>
</template>

<script>
	import CountDown from '@/components/default/CountDown.vue'
	import CartModal from '../../merchantPackages/components/cartModal.vue'
	import fastLink from '@/components/shop/fastLink.vue'
	import guessYouLikeView from '@/components/shop/marketing/guessYouLikeView.vue'
	import couponModal from '@/components/shop/marketing/couponModal.vue'
	import goodsModal from '@/components/shop/goodsModal.vue'
	import serviceView from '@/components/default/serviceView.vue'
	import ShareView from '@/components/default/ShareView.vue'
	import Foot from '@/components/default/foot.vue'
	import {
		mapState
	} from 'vuex'
	export default {
		components: {
			CountDown,
			fastLink,
			guessYouLikeView,
			goodsModal,
			couponModal,
			ShareView,
			serviceView,
			Foot,
			CartModal,
		},
		computed: {
			...mapState(['hasLogin']),
			mathLange() {
				var merchant = this.detail.merchant
				let location = this.$common.getCache('location')
				console.log(location)
				if (location && merchant && merchant.latitude && merchant.longitude) {
					var lat1 = location.latitude
					var lat2 = merchant.latitude
					var lng1 = location.longitude
					var lng2 = merchant.longitude

					console.log(123)
					var radLat1 = lat1 * Math.PI / 180.0;
					var radLat2 = lat2 * Math.PI / 180.0;
					var a = radLat1 - radLat2;
					var b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;
					var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
						Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
					s = s * 6378.137; // EARTH_RADIUS;
					s = Math.round(s * 10000) / 10000;
					return s.toFixed(1) + 'km';
				} else return ''
			}
		},
		data() {
			return {
				id: 0,
				member: null,
				config: null,
				CLOUDPATH: this.$config.cloudPath,
				theme: this.$config.THEME(),
				detail: null,
				swiperHeight: 0,
				swiperCurrent: 0,
				modalName: null,
				scrollTop: 0,
				cartNum: 0,
				error: false,
				cartProductNumber: 0,
			};
		},
		onShow() {
			this.$common.getCartNum().then((num) => {
				this.cartNum = num
			})
		},
		onLoad(option) {
			this.id = option.id
			if (!this.id) {
				this.$common.showErrorModal('参数有误')
			}
			if (option.share_id) {}
			this.$common.getConfig().then((config) => {
				this.config = config
				this.$nextTick(function() {
					uni.startPullDownRefresh({})
				})
			})
			this.swiperHeight = this.windowWidth
		},
		onReady() {},
		methods: {
			swiperChannelHandle(e) {
				this.swiperCurrent = e.detail.current
			},
			openCouponModal() {
				this.$refs.couponModal.show()
			},
			openGoodsModal() {
				this.$refs.goodsModal.show()
			},
			getProduct() {
				this.$http
					.get('product', {
						id: this.id
					})
					.then((response) => {
						uni.stopPullDownRefresh()
						var detail = response.data.data
						detail.intro = this.$common.mathRichText(response.data.data.intro)
						this.detail = detail

						this.$nextTick((r) => {
							if (this.$refs.goodsModal) {
								this.$refs.goodsModal.setData(this.detail)
							}
							if (this.$refs.CartModal) {
								this.$refs.CartModal.setData(this.detail.merchant.id, this.detail.sku[0].id)
							}
							if (this.detail.canReceiveCoupon && this.detail.canReceiveCoupon.length > 0 && this.$refs.couponModal) {
								this.$refs.couponModal.setData(this.detail.canReceiveCoupon)
							}
						})
					})
					.catch((response) => {
						console.log(response)
						uni.stopPullDownRefresh()
						this.error = true
					})
			},
			openServiceModal() {
				this.$refs.serviceView.show()
				// window.open('https://uclient.yunque360.com/frame.html?company_id=cjch051hm27mtl')
				// (function() {var _53code = document.createElement("script");_53code.src = "https://tb.53kf.com/code/code/647cfb665881c5ee62274c0e78aaad3b0/1";var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(_53code, s);})();
			},
			showShare() {
				this.$common.getMember(true).then((member) => {
					this.member = member
					if (this.detail) {
						this.$refs.ShareView.show({
							type: 'product',
							id: this.detail.id,
							thumb: this.detail.picture,
							name: this.detail.name,
							price: this.detail.marketing_id > 0 ? this.detail.marketing_price : this.detail.price,
							share_url: this.detail.share_url,
							member_id: this.member.id,
							member_name: this.member.nickname,
							member_head: this.member.head_portrait,
							reget: true
						})
					}
				})
			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			showFastModal() {
				this.$refs.fastLink.show()
			},
			onTop: function(e) {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			},
			BackPage() {
				uni.navigateBack({})
			},
			onPageScroll(e) {
				this.scrollTop = e.scrollTop
			},
			cartNumChange(n) {
				this.cartNum = n
			},
			goStore(merchant) {
				if (merchant.type == 1) {
					uni.navigateTo({
						url: "/merchantPackages/pages/store?id=" + merchant.id
					})
				}
			},
			addCart() {
				this.$refs.CartModal.add(this.detail.sku[0].id)
			},
			delCart() {
				this.$refs.CartModal.del(this.detail.sku[0].id)
			},
			cartChange(data) {
				this.cartProductNumber = data.cartProductNumber
				this.$forceUpdate()
			},
			showLocation() {
				// console.log(this.detail.merchant.longitude+'-'+this.detail.merchant.latitude)
				uni.openLocation({
					longitude: parseFloat(this.detail.merchant.longitude),
					latitude: parseFloat(this.detail.merchant.latitude),
					success: (res) => {},
					fail: (error) => {
						this.$common.showError(error)
					}
				})
			}
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			let path = '/pages/shop/goods?id=' + this.id
			if (this.member) path += "&share_id=" + this.member.id
			return {
				title: this.detail.name,
				imageUrl: this.detail.picture,
				path: path
			}
		},
		onPullDownRefresh() {
			this.getProduct()
		},
		onReachBottom() {
			if (this.$refs.guessYouLikeView)
				this.$refs.guessYouLikeView.getProduct()
		}
	}
</script>

<style>
	.vtop {
		box-shadow: none;
		background-color: none;
	}

	.product-swiper .vtop {
		right: 20rpx;
		top: 20rpx;
		z-index: 65;
	}

	.vtop .cuIcon {
		color: #FFF;
		border-radius: 50%;
		padding: 10rpx 12rpx;
	}

	.vtop .content {
		display: none;
	}

	.swiper-dot-view {
		right: 0;
		bottom: 10rpx;
		border-radius: 20rpx 0 0 20rpx;
		padding: 5rpx 20rpx;
	}

	.share {
		border-radius: 0;
		font-size: 30rpx;
		padding: 0;
		background: none;
	}

	.share::after {
		display: none;
	}

	.product-name {
		line-height: 45rpx;
		text-align: justify;
	}

	.heightover {
		height: 100vh;
		overflow: hidden;
	}

	.border-radius-top {
		border-radius: 30rpx 30rpx 0 0 !important;
	}

	.color-view {
		width: 80rpx;
		height: 40rpx;
	}

	.cu-bar.tabbar.shop .action {
		width: 100upx;
	}

	.round-left {
		border-radius: 40rpx 0 0 40rpx;
	}

	.round-right {
		border-radius: 0 40rpx 40rpx 0;
	}

	.main-ctr {
		position: fixed;
		z-index: 99;
		bottom: 140rpx;
		right: 30rpx;
	}

	.blackbg {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.errorview {
		height: 50vh;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.menu .content {
		width: 100rpx;
		min-width: 100rpx;
	}

	.text-justify {
		text-align: justify;
	}

	.sharebtn {
		background-color: unset;
		font-size: unset;
		padding: 0;
		display: inline;
	}

	.sharebtn::after {
		content: unset;
	}

	.roundbtn {
		width: 30upx;
		height: 30upx;
		border: 1px solid #0081FF;
		border-radius: 50%;
		display: inline-block;
		text-align: center;
		line-height: 30upx;
		color: #0081FF;
	}

	.cardbg {
		width: 100%;
		height: 100upx;
	}

	.card {
		width: 100upx;
		height: 100upx;
		min-width: 100upx;
	}

	.card .caredpeople {
		width: 100%;
		left: 0;
		bottom: 30px;
		z-index: 0;
		top: unset;
	}

	.settlebtn {
		min-width: 140rpx;
		border-radius: 0 100rpx 100rpx 0;
		height: 100%;
		text-align: center;
		align-items: center;
		display: flex;
		justify-content: center;
	}

	.noshadown {
		box-shadow: unset;
	}
</style>
